<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/vue.js"></script>
  </head>
  <body>
    <div id="app">{{name}}</div>
  </body>
</html>
<script>
 /*  new Vue({
    //el写法一
    el: "#app",
    //data写法一
    data: {
      name: "ss",
    },
  }); */

/* 
  new Vue({
    //el写法一
    el: "#app",
    //data写法二 函数式
    data() {
        //返回一个对象
        return { name: "ss",};
      
    },
  }); */


/*   new Vue({
    //data写法一
    data: {
      name: "ss",
    },
  }).$mount("#app"); //el写法二 */

//  const app = new Vue({
//     //data写法一
//     data: {
//       name: "ss",
//     },
//   }); 
// app.$mount("#app");



//测试
new Vue({
    el:'#app',
    //函数
    data(){
        //通常情况下 我们如果使用this可以发现this是Vue对象
        console.log(this)
        return {
            name:'ss'
        }
    }
});


  
</script>

<!-- 
el与data的写法
el有两种写法：
  -创建Vue实例的时候配置属性  el:'#app'
  -先创建好Vue实例然后再通过$mount绑定   app.$mount("#app")

data有两种写法：
  对象式：  data:{}
  函数式:data(){  return {数据}}
data如何选择:目前哪种写法都可以，但是到组件和脚手架以后必须使用函数式 否则会报错


注：Vue中的函数this指的是Vue对象实例

 -->
